<template>
  <div :style="{backgroundImage:c}">
    <div class="page_container">
      <div class="page-body">
        <div class="search_content" :style="{height:(statusHeight+navHeight)+'px'}">
          <div :style="{height:statusHeight+'px'}"></div>
          <div style="display:flex;flex-direction:row;align-items:center;margin-top: 20px;"
               :style="{height:navHeight+'px'}">
<!--            <div class="title_log" @click="toChange">-->
<!--              <image :src="mch.logo" style="width:40px;height:40px"></image>-->
<!--            </div>-->
<!--            <div class="line"></div>-->
            <image src="http://rzico.oss-cn-shenzhen.aliyuncs.com/img/dingwei.png"
                   style="width:30px;height:30px"></image>
            <text class="shortName" @click="toChange">{{mchName}}</text>
            <text @click="toChange" class="icon-sort-down1">&#xe61f;</text>
          </div>
        </div>
        <div style="padding-bottom:20px;padding-left:20px;">
          <div class="search_input_content" @click="searchClick">
            <div class="icon_search">
              <text class="icon-search">&#xe62f;</text>
            </div>
            <div class="search_input">
              <text class="search_input_title">请输入商品名</text>
            </div>
          </div>
        </div>
        <div class="page-section page-section-spacing">
          <slider class="banner" interval="3000" auto-play="true" show-indicators="true" @change="changeBackground">
            <div class="banner-frame" v-for="img in photoList">
              <image class="banner-image" :src="img.thumbnail" @click="toLink(img)"></image>
            </div>
          </slider>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  list
} from '../../../../api/ad'
import {
  getInfo
} from '../../../../api/mch'
import {
  LBSLocation, MCHLocation
} from '../../../../api/amap'
const storage = weex.requireModule('storage')
export default {
  data() {
    return {
      tagIds: [],
      background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
      photoList: [],
      mchName: '',
      latitude: 0,
      longitude: 0,
      indicatorDots: true,
      vertical: false,
      autoplay: true,
      circular: true,
      interval: 3000,
      duration: 500,
      previousMargin: 0,
      color: [],
      c: 'red',
      nextMargin: 0,
      pageNum: 0,
      pageSize: 10,
      startSwipers: false,
      transparent: 1,
      headerColor: 'ragb(255,255,255,0)',
      mch: {logo: '', name: ''},
      statusHeight: 0,
      navHeight: 80
    }
  },
  props: [
    'content'
  ],
  created() {
    // 页面被展示
    this.statusHeight = eeui.getStatusBarHeightPx()
    this.loadMch();
    this.initIconFont()
    this.mchName = this.getGlobalData().shopName
    console.log(this.getGlobalData().mchName)
    if (this.content.tagids != null) {
      this.tagIds = this.content.tagids.split(',')
      for (var i = 0; i < this.tagIds.length; i++) {
        this.tagIds[i] = parseInt(this.tagIds[i])
      }
    }
    this.loadAd()
  },
  methods: {
    toChange() {
      var _this = this
      eeui.openPage({
            url: 'root://pages/index/amap.js',
            statusBarType: 'immersion',
            statusBarStyle: false
          },
          (result) => {
            console.info(result)
            if (result.status == 'stop'){
              _this.mchName = _this.getGlobalData().shopName
              _this.$forceUpdate()
            }
          }
      );
    },
    toLink(e) {
      if (e.hasOwnProperty('typeId') && !this.isNull(e.typeId)) {
        if (e.type === 0) {

          eeui.openPage({
            url: 'root://pages/goods/product/details.js',
            params: e.typeId,
            statusBarType: 'immersion',
            statusBarStyle:false
          })


        } else if (e.type === 9) {
          eeui.openPage({
            url: 'root://pages/index/wxPage/wxPage.js',
            params: e.typeId,
            statusBarType: 'immersion',
            statusBarStyle:false
          })

        } else if (e.type === 1) {
          eeui.openPage({
            url: 'root://pages/goods/category/category.js',
            params: e.typeId,
            statusBarType: 'immersion',
            statusBarStyle: false
          })

        } else if(e.type === 2){
            eeui.openPage({
                url: 'root://pages/member/detail/article.js',
                params: e.typeId,
                statusBarType: 'immersion',
                statusBarStyle:false
            })


        } else if (e.type === 12) {
          if (e.path) {
            eeui.openPage({
              pageType: 'web',
              url: e.path,
              statusBarType: 'immersion',
              statusBarStyle:false
            })
          }
        }
      }
    },
    searchClick() {
      const eeui = app.requireModule('eeui');
      eeui.openPage({
            url: 'root://pages/goods/search/index.js',
            statusBarType: 'immersion',
            statusBarStyle:false
          },
          (result) => {

          }
      );
    },
    changeBackground(e) {
      this.c = this.color[e.index]
    },
    loadMch() {
      var _this = this;
      getInfo(this.getGlobalData().mchId).then(res => {
        _this.mch = res.data;
      });
    },
    loadAd() {
      var _this = this
      list({
        mchId: this.getGlobalData().mchId,
        tagIds: this.tagIds
      }).then(res => {
        res.data.data.forEach(element => {
          var backgroundColor = "linear-gradient(to bottom," + element.backgroundColor + ", rgba(248, 248, 248, 1))"
          _this.color.push(backgroundColor)
          element.thumbnail = this.thumbnail(element.thumbnail, 710, 355)
          this.c = this.color[0]
        });
        _this.photoList = res.data.data
      });
    },
  },
}
</script>

<style scoped>
.page_container {
  font-size: 32px;
  line-height: 1.6;
}

.page-body {

}

.page-section {
  width: 750px;
}


.page-section-spacing {
  box-sizing: border-box;
}


.title_log {
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 100%;
}

.search_input_content {
  width: 710px;
  height: 58px;
  opacity: 0.95;
  border-radius: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: white;
  overflow: hidden;
  margin-top: 20px;
}

.search_input_title {
  font-size: 26px;
  text-align: left;
  color: #333333;
}

.icon_search {
  margin-left: 20px;
}


.search_input {
  width: 600px;
  height: 58px;
  margin-left: 14px;
  font-size: 24px;
  display: flex;
  align-items: center;
  flex-direction: row;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  opacity: 0.89;
}

.search_content {
  padding-left: 20px;
}

.line {
  width: 3px;
  height: 40px;
  background-color: white;
  margin-left: 20px;
  margin-right: 20px;
}

.shortName {
  font-size: 34px;
  color: white;
  line-height: 0;
  margin-left: 10px;
  max-width: 300px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.icon-sort-down1 {
  font-size: 22px;
  font-family: iconfont2;
  color: white;
  margin-left: 10px
}

.icon-search {
  font-size: 26px;
  font-family: iconfont2;
}

.banner {
  display: flex;
  padding-right: 20px;
  width: 750px;
  border-radius: 16px;
  height: 350px;
  overflow: hidden;
}

.banner-frame {
  width: 710px;
  height: 350px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}


.banner-image {
  width: 710px;
  height: 350px;
  border-radius: 16px;
}
</style>